<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投稿</title>
    <link rel="shortcut icon" th:href=" @{/favicon.ico}" />
    <link rel="stylesheet" th:href="@{./css/push.css}">
</head>


<body>
    <form method="post" enctype="multipart/form-data">
        <div>
            <label for="image_uploads">请单击这里选择你要上传的文件 (图片格式:PNG, JPG, jpeg)</label>
            <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" >
        </div>
        <div class="preview">
            <p>当前无可选文件</p>
        </div>
        <div>
            <textarea id="story" name="story" rows="5" cols="80" placeholder="输入文案"></textarea>
        </div>
        <div>
            <button type="submit">开始上传</button>
        </div>
        <div>
            <button type="reset">重置你的上传</button>
        </div>
    </form>
    <div class="return">
        <img src="updata_img/return.png" alt="">
        <a th:href="@{/tomany}">返回浏览页</a>
    </div>
    <script>
        const input = document.querySelector('input');
        const preview = document.querySelector('.preview');

        input.style.opacity = 0;

        input.addEventListener('change', updateImageDisplay);

        function updateImageDisplay() {
            while (preview.firstChild) {
                preview.removeChild(preview.firstChild);
            }

            const curFiles = input.files;
            if (curFiles.length === 0) {
                const para = document.createElement('p');
                para.textContent = 'No files currently selected for upload';
                preview.appendChild(para);
            } else {
                const list = document.createElement('ol');
                preview.appendChild(list);

                for (const file of curFiles) {
                    const listItem = document.createElement('li');
                    const para = document.createElement('p');

                    if (validFileType(file)) {
                        para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
                        const image = document.createElement('img');
                        image.src = URL.createObjectURL(file);

                        listItem.appendChild(image);
                        listItem.appendChild(para);
                    } else {
                        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
                        listItem.appendChild(para);
                    }

                    list.appendChild(listItem);
                }
            }
        }

        const fileTypes = [
            'image/apng',
            'image/bmp',
            'image/gif',
            'image/jpeg',
            'image/pjpeg',
            'image/png',
            'image/svg+xml',
            'image/tiff',
            'image/webp',
            `image/x-icon`
        ];

        function validFileType(file) {
            return fileTypes.includes(file.type);
        }

        function returnFileSize(number) {
            if (number < 1024) {
                return number + 'bytes';
            } else if (number > 1024 && number < 1048576) {
                return (number / 1024).toFixed(1) + 'KB';
            } else if (number > 1048576) {
                return (number / 1048576).toFixed(1) + 'MB';
            }
        }
    </script>
</body>

</html>